<script setup lang="ts">
import { reactive } from 'vue'

// 响应式数据对象
// 复杂数据：对象/数组
const obj = reactive({
  name: '张三',
  age: 18
})
const oneYear = () => {
  obj.age++
}

// 补充说明
const arr = reactive([
  { name: '张三', age: 18 },
  { name: '李四', age: 28 },
  { name: '王五', age: 38 }
])

const changeZsAge = () => {
  arr[0].age++
}
</script>

<template>
  <div class="app-page">
    <div>姓名：{{ obj.name }},年龄：{{ obj.age }}</div>
    <button @click="oneYear">过了一年</button>
    <div>修改张三的年龄{{ arr }}</div>
    <button @click="changeZsAge">修改张三的年龄</button>
  </div>
</template>

<style lang="css" scoped></style>
